/*
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-12-06 21:16:32
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2023-12-24 22:32:56
 * @FilePath: /tuberculosis_screening_display_system/src/components/Card/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { computed, defineComponent } from 'vue';
import './index.scss';

export default defineComponent({
  name: 'Card',
  props: {
    title: String,
    padding: String,
  },

  render(props, context) {
   
    const { padding } = props;

    const classes = computed(() => {
      if(!padding) {
        return `gap_default`
      }else if(classes) {
        return ``
      }else {
        return `gap_${padding}`
      }
    })
    return (
      <div class={`card ${classes.value}`}>
        {
          this.title && <div class='card-header'>
            <h5 class='m_unset'>{this.title}</h5>
          </div>
        }
        <div class='card-body'>
          {this.$slots.default()}
        </div>
        {
          this.$slots.footer && <div class='card-footer'> {this.$slots.footer()}</div>
        }
      </div>
    );
  },
});